<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
		<view>
				<u-tabs
					:list="category"
					:scrollable="true"
					keyName="category_name"
					:current="currentCatetab"
					@click="changeCateTab"
					:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
					:activeStyle="{
							color: '#2B937C',
							transform: 'scale(1.05)'
						}"
					lineHeight="3"
					lineColor="#2B937C"
					itemStyle="height:40px;">
				</u-tabs>

		<u-gap height="10"></u-gap>
		<view class="base-tonglan-box">
			<view class="htitle u-flex u-flex-middle">
				<view class="u-flex-6">产品列表</view>
				<!--view class="u-flex-3">
					<u-button type="success"  size="mini"  @click="$Router.push({path:'/pages/componentsC/shop/storemanage/importsku',query: {'shop_id':shop_id}})">导入SKU</u-button>
				</view>
				<view class="u-flex-3 u-p-l-20">
					<u-button type="warning" @click="add_1()" size="mini">添加商品</u-button>
				</view-->
			</view>
			<view v-if="goods_list.length === 0">
				<u-empty text="此类目无产品" class="u-m-t-80" mode="data"  icon="https://i.yodin.com/storage/empty/data.png"  :show="goods_list.length === 0"></u-empty>
			</view>
			<view v-if="goods_list.length>0">
			<view class="item u-flex" v-for="(goods, index) in goods_list" :key="index">
				<view class="u-flex-2">
					<!-- <image :src="goods.cover" mode="scaleToFill" style="width:100%;height:100%;"></image> -->
					<u--image :showLoading="true" :src="goods.cover_url" mode="aspectFill" width="50px" height="40px"></u--image>
				</view>
				<view class="u-flex-10 u-p-r-20">
					<view class="u-flex u-flex-middle">
					  <view class="u-flex-8">
						<view class="u-line-1">{{goods.name}}</view>
						<view>
							<text class="price">{{goods.price}}</text>
							</view>
					  </view>
					  <view class="u-flex-4">
						  <view class="u-flex u-m-b-10 u-flex-fill u-flex-end">
						 	 <view class="">
								 <u-switch v-model="goods.is_disable" size="20" :activeValue="0" :inactiveValue="1" @change="changehide(goods,'a')"></u-switch>
							 </view>
						  </view>
						  <view class="u-flex">
							  <view class="u-flex-6"><u-button size="mini" type="primary"
							  @click="$tools.goJump('/pagesPackageA/storemanage/goodsedit',{goods_id: goods.goods_id},!userInfo.token,'')">修改</u-button></view>
							  <view class="u-flex-6 u-m-l-20"><u-button size="mini" type="error" @click="delgoods(goods.goods_id)">删除</u-button></view>
						  </view>
					  </view>
					</view>
				</view>
				</view>
				<u-loadmore :status="loadStatus" @loadmore="goodslist" v-if="goods_list.length>0"></u-loadmore>
			</view>
			<u-gap height="55"></u-gap>
		</view>
	</view>

  </view>
</template>


<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import { api_goods_list,api_goods_save } from '@/config/api.js';
export default {
  data() {
    return {
      goods_list:[],
	  goodsinfo:[],
	  goods_id:'',
	  formlabelwidth:120,
      hasLogin: false,
      loadStatus: "loadmore",
      loadstatus: false,
	  category:{
		  category_name:''
	  },
	  currentCatetab:0,
		page:1,
    };
  },
  computed: {
    ...mapState(["userInfo","siteInfo"]),
  },
  onReachBottom() {
    if (this.loadStatus=="loadmore"){
    setTimeout(() => {
      this.goodslist();
    }, 50);
	}
  },
	onPullDownRefresh() {
			this.goods_list = [];
			this.page=1;
			this.goodslist();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 100);
	},

// watch: {
// 	//监听reFresh,如果有修改就执行监听器
// 	reFresh: function() {
//         console.log('wathc',this.reFresh)
// 		this.goodslist()
// 	},
// 	},
  onLoad(options) {
	 this.shop_id = options.shop_id;
	 this.category=this.siteInfo.goods_cate
	 this.goodslist()
  },

  methods: {
	  
		changehide(e,type){
			console.log(e)
			api_goods_save({
				goods_id:e.goods_id,
				is_disable:e.is_disable==0?0:1
			}).then(res => {
					console.log(res);
			}).catch((e)=>{});
		},
	  
    changeCateTab(e) {
		this.category_id=this.category[e.index].category_id
		this.currentCatetab=e.index;
		this.goods_list = [];
		this.page=1;
		this.goodslist()
    },
	goodslist(){
		//this.list_img1=""
		//this.fileList1=[]
		api_goods_list({
			page:this.page,
			limit:20,
			shop_id:this.shop_id,
			category_id:this.category_id,
			showtype:'goodsmanage'
		}).then(res => {
			console.log(res)
              if (res.count > 0) {
                let list = res.list;
                if (this.page <= res.pages) {
                  for (let i = 0; i < list.length; i++) {
                    this.goods_list.push(list[i]);
                  }
                  if (this.page == res.pages) {
                    this.loadStatus = "nomore";
                  }
                  this.page += 1;
                } else {
                  this.loadStatus = "nomore";
                }
              } else {
                this.goods_list = [];
                this.loadStatus = "nomore";
              }
			this.loadstatus = false;
		}).catch((e)=>{});
	},

	delgoods(id){
		this.$api("shopstore.products_del", {
			id: id
		}).then((res) => {
			if (res.code==200){
					this.goods_list = [];
					this.page=1;
					this.goodslist()
				}else{
					this.$u.toast(res.msg);
			}}).catch((e) => {});
	},


	
  },
};
</script>
<style lang="scss" scoped>
	.base-tonglan-box{
         .htitle_s2{
		 min-height: 80rpx;
		 line-height: 80rpx;
		 padding: 0rpx 10rpx;
		 border-bottom:1px solid #f8f8f8;
		 }
         .htitle{
		 min-height: 80rpx;
		 line-height: 80rpx;
		 padding: 0rpx 20rpx;
		 background: #ffffff;
		 font-weight: bold; font-style: normal;
		 border-bottom:1px solid #f8f8f8;
		 font-size: 30rpx;
		 i{
			 display: inline-block;
			 width: 50rpx;height: 50rpx;line-height: 50rpx;
			 text-align: center;
			 margin: 20rpx 20rpx 20rpx 0rpx;
			 border-radius: 100%;
			 background:#ffffff;
			 border: solid 1px #f8f8f8;
			 .u-icon{
				 color: #666666;
				 
			 }
		 }
		 }
		.item_single{
			position: relative;
			box-sizing: border-box;
		}
		.item{
			line-height: 160%;
			position: relative;
			box-sizing: border-box;
			padding: 10rpx 10rpx;
			&:after {
				position: absolute;
				z-index: 0;
				right: 0;
				bottom: 0;
				left: 0;
				height: 0.5px;
				content: '';
				-webkit-transform: scaleY(.5);
				-ms-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #f8f8f8;
			}
			&:last-child {
				&:after{
					border-bottom: 0px;
					background-color:#FFFFFF;
					height: 0.1rpx;
				}
			}
		}
	}
	
	
	.pops{
		background: #FFFFFF;
		height: 1220rpx;
		.title{
			background: $u-primary-light;
			padding: 20rpx 30rpx;
		}
	}
	.pre-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.pre-item {
		margin-right: 20rpx;
		border-radius: 10rpx;
		height: 120rpx;
		width: 120rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 0rpx;
		.u-icon{
			position: absolute;
			top:10rpx;
			right:10rpx;
		}
	}

	.pre-item-image {
		height: 120rpx;
		width: 120rpx;
	}
	.u-action-sheet__item-wrap__item{
		padding: 5px;
	}
</style>
